leaflet在vue中标记点(marker)的三种方式

#leaflet在vue中标记点(marker)的三种方式| 来源: 网络整理| 查看: 265

在地图标记点,或者点击某处获取经纬度在地图操作中是必须的,整理了一下,三种方式进行使用:

main.js文件:

import Vue from 'vue' import App from './App.vue' import L from "leaflet" import "leaflet/dist/leaflet.css" import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标 import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标 Vue.prototype.icoName = icon Vue.prototype.iconShadowName = iconShadow Vue.use(L) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

vue文件:

在vue2中使用leaflet标记点 import defaultMark from '@/assets/mark.png' export default { name: 'LeafletMap', data() { return { map: null, defaultMark } }, mounted() { // 地图初始化 this.initMap() }, methods: { // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别 initMap() { let map = L.map("map", { center: [24.485666, 118.095498], // 中心位置 zoom: 12, // 缩放等级 attributionControl: true, // 版权控件 zoomControl: true //缩放控件 }); this.map = map; // data上需要挂载 this.map.on('click', i =>{ // 点击获取地图上的经纬度 console.log(i.latlng) }) L.tileLayer( "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}" ).addTo(map) // 加载底图 L.marker([24.485666, 118.12], { icon: new L.Icon({ className: "lmap-icon", iconUrl:require('../assets/redMark.png'), iconSize: [24, 24], iconAnchor: [16, 16], }) }).addTo(this.map); let DefaultIcon1 = L.icon({ iconUrl: this.icoName, // shadowUrl: iconShadow, iconSize: [24, 41], // 图标的大小【值1，值2】为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52 shadowSize: [41,41], // 影子的大小【值1，值2】为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41 iconAnchor: [24, 41], // 图标将对应标记点的位置这个是重点，【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52) shadowAnchor: [4, 62], // 相同的影子 popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的 }) let markers1 = L.marker([24.485666, 118.095498], { icon: DefaultIcon1, }).addTo(this.map) let DefaultIcon2 = L.divIcon({ className: "lmap-icon", html: `标3

`,// shadowUrl: iconShadow, iconSize: [24, 41], // 图标的大小【值1，值2】为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52 shadowSize: [41,41], // 影子的大小【值1，值2】为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41 iconAnchor: [24, 41], // 图标将对应标记点的位置这个是重点，【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52) shadowAnchor: [4, 62], // 相同的影子 popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的 }) let markers2 = L.marker([24.52, 118.095], { icon: DefaultIcon2, }).addTo(this.map) } } } #map { width: 800px; height: 500px; margin: 50px auto; } .lmap-image { width: 32px; height: 32px; } .lmap-span { display: inline-block; margin-left: 5px; padding: 5px; font-weight: bold; line-height: 20px; font-size: 14px; color: #fff; white-space: nowrap; } .lmap-text { display: inline-block; margin-left: 5px; padding: 5px; font-weight: bold; line-height: 20px; font-size: 16px; color: #fff; width: 500px; white-space: nowrap; position: absolute; text-align: center; top: 25px; left: -250px; }

效果如下图:

标记需要文字标示的也可以在点击标记的时候用popup弹窗,也可以用DivIcon,第一种是在main.js页面引入框架的默认图标.看文档是不需要引入.第二种引入自己准备的图标图片第三种用了DivIcon,要是海量的标记也可以用Canvas-Markers插件,

demo代码地址:https://gitee.com/yuexiayunsheng/leaflet-map

【本文地址】

公司简介

联系我们